var x1, y1, x2, y2, offleft, offtop, isclik = 0,
	isclik1 = 0,
	isclick2 = 0,
	isclick3 = 0,isclick4 = 0,isclick5=0,isclick6=0,isclick7=0;
$(function() {
	var wmax = 1400 - $("#shade").width();
	var hmax = 500 - $("#shade").height();
	var wmax1 = 1400 - $("#sprite").width();
	var hmax1 = 500 - $("#sprite").height();
	var wmax2 = 1400 - $("#sprite1").width();
	var hmax2 = 500 - $("#sprite1").height();
	var wmax3 = 1400 - $("#sprite2").width();
	var hmax3 = 500 - $("#sprite2").height();
	var wmax4 = 1400 - $("#sprite3").width();
	var hmax4 = 500 - $("#sprite3").height();
	var wmax5 = 1400 - $("#shade1").width();
	var hmax5 = 500 - $("#shade1").height();
	var wmax6 = 1400 - $("#shade2").width();
	var hmax6 = 500 - $("#shade2").height();
	var wmax7 = 1400 - $("#shade3").width();
	var hmax7 = 500 - $("#shade3").height();
	$("#shade").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#shade").css('left'));
		offtop = parseInt($("#shade").css('top'));
		isclik = 1;
	});
	$(".card").mousemove(function(e) {
		if (isclik == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			var xx = x2 - x1 + offleft;
			var yy = y2 - y1 + offtop;
			if (xx >= 0 && xx < wmax) {
				$("#shade").css('left', xx + "px");
			}
			if (yy >= 0 && yy < hmax - 1) {
				$("#shade").css('top', yy + "px");
			}
		}

	}).mouseup(function() {
		isclik = 0;
	});
	
	$("#shade1").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#shade1").css('left'));
		offtop = parseInt($("#shade1").css('top'));
		isclik5 = 1;
	});
	$(".card").mousemove(function(e) {
		if (isclik5 == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			var xx = x2 - x1 + offleft;
			var yy = y2 - y1 + offtop;
			if (xx >= 0 && xx < wmax5) {
				$("#shade1").css('left', xx + "px");
			}
			if (yy >= 0 && yy < hmax5 - 1) {
				$("#shade1").css('top', yy + "px");
			}
		}
	
	}).mouseup(function() {
		isclik5 = 0;
	});
	
	$("#shade2").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#shade2").css('left'));
		offtop = parseInt($("#shade2").css('top'));
		isclik6 = 1;
	});
	$(".card").mousemove(function(e) {
		if (isclik6 == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			var xx = x2 - x1 + offleft;
			var yy = y2 - y1 + offtop;
			if (xx >= 0 && xx < wmax6) {
				$("#shade2").css('left', xx + "px");
			}
			if (yy >= 0 && yy < hmax6 - 1) {
				$("#shade2").css('top', yy + "px");
			}
		}
	
	}).mouseup(function() {
		isclik6 = 0;
	});
	
	
	$("#shade3").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#shade3").css('left'));
		offtop = parseInt($("#shade3").css('top'));
		isclik7 = 1;
	});
	$(".card").mousemove(function(e) {
		if (isclik7 == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			var xx = x2 - x1 + offleft;
			var yy = y2 - y1 + offtop;
			if (xx >= 0 && xx < wmax7) {
				$("#shade3").css('left', xx + "px");
			}
			if (yy >= 0 && yy < hmax7 - 1) {
				$("#shade3").css('top', yy + "px");
			}
		}
	
	}).mouseup(function() {
		isclik7 = 0;
	});
	
	
	$("#sprite").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#sprite").css('left'));
		offtop = parseInt($("#sprite").css('top'));
		isclik1 = 1;
	});
	$(".card").mousemove(function(e) {
		if (isclik1 == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			var xx = x2 - x1 + offleft;
			var yy = y2 - y1 + offtop;
			if (xx >= 0 && xx < wmax1) {
				$("#sprite").css('left', xx + "px");
			}
			if (yy >= 0 && yy < hmax1 - 1) {
				$("#sprite").css('top', yy + "px");
			}
		}

	}).mouseup(function() {
		isclik1 = 0;
	});


	$("#sprite1").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#sprite1").css('left'));
		offtop = parseInt($("#sprite1").css('top'));
		isclik2 = 1;
	});
	$(".card").mousemove(function(e) {
		if (isclik2 == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			var xx = x2 - x1 + offleft;
			var yy = y2 - y1 + offtop;
			if (xx >= 0 && xx < wmax2) {
				$("#sprite1").css('left', xx + "px");
			}
			if (yy >= 0 && yy < hmax2 - 1) {
				$("#sprite1").css('top', yy + "px");
			}
		}

	}).mouseup(function() {
		isclik2 = 0;
	});

	$("#sprite2").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#sprite2").css('left'));
		offtop = parseInt($("#sprite2").css('top'));
		isclik3 = 1;
	});
	$(".card").mousemove(function(e) {
		if (isclik3 == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			var xx = x2 - x1 + offleft;
			var yy = y2 - y1 + offtop;
			if (xx >= 0 && xx < wmax3) {
				$("#sprite2").css('left', xx + "px");
			}
			if (yy >= 0 && yy < hmax3 - 1) {
				$("#sprite2").css('top', yy + "px");
			}
		}

	}).mouseup(function() {
		isclik3 = 0;
	});

	$("#sprite3").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#sprite3").css('left'));
		offtop = parseInt($("#sprite3").css('top'));
		isclik4 = 1;
	});
	$(".card").mousemove(function(e) {
		if (isclik4 == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			var xx = x2 - x1 + offleft;
			var yy = y2 - y1 + offtop;
			if (xx >= 0 && xx < wmax4) {
				$("#sprite3").css('left', xx + "px");
			}
			if (yy >= 0 && yy < hmax4 - 1) {
				$("#sprite3").css('top', yy + "px");
			}
		}

	}).mouseup(function() {
		isclik4 = 0;
	});
})
